<template>
	<view class="brand-price">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="cover-integral" @click="pageRoute('/agentPages/integral-manage/integral-manage')">
			<view class="left">
				<view class="value">{{score}}</view>
				<view class="label">当前积分</view>
			</view>
			<view class="do">去挣积分<uni-icons type="right" size="20" color="#1A79F9"></uni-icons></view>
		</view>

		<view class="nav-search">
			<gyd-search placeholder="请输入品牌关键字" :radius="32" @blur="search" @clear="clearKeyword"></gyd-search>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in goodsList" :key="index">
				<view class="thnum">
					<image :src="$imageUrl(item.logo)" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">{{item.name}}</view>
					<view class="desc">
						水站：{{item.store.store_name}}
					</view>
					<view class="price">
						查看所需积分
						<text class="unit">{{ item.cost_score }}</text>
					</view>
					<view class="price">
						供货价
						<text class="unit">￥</text>
						<text class="value"
							v-if="item.look_price_score && item.look_price_score.length>0">{{item.cost_price}}</text>
						<text class="value" v-else @click="lookPrice(item.id)">点击查看</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '品牌供货价',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		score: '1130.00',
		params: {
			keyword: '',
			skip: 0,
		},
		isMore: true,
		goodsList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getGoodsList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		search();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getGoodsList();
	})

	function getGoodsList() {
		state.goodsList = [{
			id: 1,
			logo: '/uploads/images/202510/15/filee1b1c50fcedb54ddbd9f5c369b5f80091076.jpg',
			name: '珍茗18.9L桶装水',
			cost_score: '10.00',
			cost_price: '12.00',
			store: {
				store_name: '云海水站',
			},
			look_price_score: [],
		}, {
			id: 2,
			logo: '/uploads/images/202510/15/filee1b1c50fcedb54ddbd9f5c369b5f80091076.jpg',
			name: '云南山泉18.9L桶装水',
			cost_score: '10.00',
			cost_price: '13.00',
			store: {
				store_name: '云海水站',
			},
			look_price_score: [{
				id: 1
			}],
		}];
	}

	function search(val = '') {
		console.log('失去焦点', val);
		state.params.keyword = val;
		state.isMore = true;
		state.goodsList = [];
		getGoodsList();
	}

	function clearKeyword(val) {
		console.log('清除搜索关键字', val);
		search();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		score,
		params,
		isMore,
		goodsList,
	} = toRefs(state);
</script>

<style lang="scss">
	.brand-price {
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

		.cover-integral {
			background: url($web_url+'/static/images/bg-cover-mall.png');
			padding: $m24;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.label {
					text-align: center;
					font-size: $font-24;
				}

				.value {
					font-size: $font-48;
					color: $primary-color;
					font-weight: bold;
				}
			}

			.do {
				color: $primary-color;
			}
		}

		.nav-search {
			padding: $m24 0;
		}

		.list {
			.item {
				display: flex;
				align-items: center;
				background: #fff;
				padding: $m24;
				margin: 0 0 $m24 0;

				.thnum {
					width: 140rpx;
					height: 140rpx;
					margin: 0 $m24 0 0;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.info {
					flex: 1;

					.name {
						color: $main-color;
						font-size: $font-36;
						font-weight: 700;
					}

					.desc {
						@include ellipsis(3);
						line-height: 36rpx;
					}

					.price {
						color: $tips-color;
						font-size: $font-28;

						.unit {
							font-size: 22rpx;
							color: $primary-color;
						}

						.value {
							color: $primary-color;
							font-size: $font-36;
							font-weight: 700;
						}
					}
				}
			}
		}
	}
</style>